<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <pre>

    Vue 将数组方法进行了进一步封装，产生了两类方法：变异(变更)方法、替换数组

    变异(变更)方法：
      变异方法具有响应式的功能，可以直接对数据进行修改，并响应视图
      就是说使用这些方法对 data 中数据修改以后，能够直接触发视图更新

      push()、pop()、shift()、unshift()、splice()、sort()、reverse()

    替换数组： 
      不会触发视图更新，会产生有一个新的数组，需要把新的数组赋值给 data 中的数据，视图才会更新

      filter()、concat() 和 slice()

  </pre>

  <div id="app">
    <p v-for="(item, index) in arr" :key="index">{{ item }}</p>
    <button @click="handle">变异方法</button>
    <button @click="handle1">替换数组</button>
  </div>

  <script src="./scripts/vue.js"></script>
  <script>

    var vm = new Vue({
      el: '#app',
      data: {
        arr: ['汤姆', '杰瑞', '斯派克']
      },
      methods: {
        handle () {
          this.arr.push('泰克')
        },
        handle1 () {
          this.arr = this.arr.slice(0, 2)
        }
      }
    })
  </script>
</body>

</html>